<!--外购一般固体废物利用处置年度台账-->
<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="二级集团：">
                        <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="单位名称：" prop="order">
                        <company-select v-model="dataToQuery.companyName" style="width:100%" />
                        <!-- <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname='setQueryOrgName'
                                      :orgTree="true"
                                      :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom> -->
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label='发生时间：'>
                        <DatePicker class="query-form-el" v-model="dataToQuery.occurrenceTimeRange" format="yyyy-MM-dd" type="daterange" placement="bottom-start" placeholder="请选择查询时间段"
                                    :clearable="false" @on-change="(date) => onSelectFieldQueryDateRange(date, 'occurrenceTime')"></DatePicker>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">

                <Col span="8" offset="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                    <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出
                    </Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
               :loading='pageStatus.loading' @on-sort-change="sortChange"
               border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal :title="this.getModalTitle('未遂事件记录')" :transfer=false :mask-closable="false" v-model="dialogShow"
               v-if="dataToView && dialogShow" :width=800 class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                          :model="dataToView" :rules="mode === 'view'?{}:ruleCustom"
                          :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='单位名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                                    <div v-else>
                                        <cascader-dom  v-if="show"  class='query-form-el' ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true"
                                                       :currentOrgId="dataToView.companyId"
                                                       :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                    </div>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='发生时间：' prop='occurrenceTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate( dataToView.occurrenceTime) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择发生时间" v-model='dataToView.occurrenceTime' ></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='地点或部位：' prop='address'>
                                    <div v-if="mode === 'view'">{{ dataToView.address }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写地点或部位" type="textarea" :autosize="{minRows:2,maxRows:5}" v-model='dataToView.address'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='事件经过描述：' prop='description'>
                                    <div v-if="mode === 'view'">{{ dataToView.description }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写事件经过描述" type="textarea" :autosize="{minRows:2,maxRows:5}" v-model='dataToView.description'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='应急处置情况：' prop='emergencyDisposal'>
                                    <div v-if="mode === 'view'">{{ dataToView.emergencyDisposal }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写应急处置情况" type="textarea" :autosize="{minRows:2,maxRows:5}" v-model='dataToView.emergencyDisposal'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='原因分析：' prop='causeAnalysis'>
                                    <div v-if="mode === 'view'">{{ dataToView.causeAnalysis }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写原因分析" type="textarea" :autosize="{minRows:2,maxRows:5}" v-model='dataToView.causeAnalysis'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='隐患整改情况：' prop='rectificationOfHiddenDangers'>
                                    <div v-if="mode === 'view'">{{ dataToView.rectificationOfHiddenDangers }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写隐患整改情况" type="textarea" :autosize="{minRows:2,maxRows:5}" v-model='dataToView.rectificationOfHiddenDangers'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='事件反思或经验总结：' prop='summarizeExperience'>
                                    <div v-if="mode === 'view'">{{ dataToView.summarizeExperience }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写事件反思或经验总结" type="textarea" :autosize="{minRows:2,maxRows:5}" v-model='dataToView.summarizeExperience'></Input>
                                </FormItem>
                            </Col>
                        </Row>


                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人：' prop='createUserName'>
                                    <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly
                                           v-model='dataToView.createUserName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填报时间：' prop='createDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly
                                                v-model='dataToView.createDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>

                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
                </Button>
                <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';

    export default {
        components: {cascaderDom},
        data() {
            return {
                ...this.createCommonDataField(),
                imgUrl: "",
                columns1: [
                    {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'companyName',title: '单位名称',  align: 'center', minWidth: 160, },
                    { key:'occurrenceTime',title: '发生时间', sortable: "custom", align: 'center', minWidth: 120,  render: this.renderCellDate },
                    { key:'address',title: '地点或部位',  align: 'center', minWidth: 120, tooltip:true },
                    { key:'description',title: '事件经过描述',  align: 'center', minWidth: 120, tooltip:true },
                    { key:'emergencyDisposal',title: '应急处置情况',  align: 'center', minWidth: 120,  tooltip:true},
                    { key:'causeAnalysis',title: '原因分析',  align: 'center', minWidth: 120, tooltip:true },
                    { key:'rectificationOfHiddenDangers',title: '隐患整改情况',  align: 'center', minWidth: 120,tooltip:true  },
                    { key:'summarizeExperience',title: '事件反思或经验总结',  align: 'center', minWidth: 120,  tooltip:true},

                    // { key:'belongOrgName',title: '所属二级集团',  align: 'center', minWidth: 120, },
                    // { key:'createUserName',title: '填报人',  align: 'center',minWidth: 120, },
                    {key: 'createDate', title: '填报时间', sortable: "custom", align: 'center', minWidth: 120,render: this.renderCellDate},
                    // { key:'registrantPhone',title: '填报人手机号',  align: 'center',minWidth: 120, },
                    this.getActionColumns(),
                ],
                ruleCustom: {
                    // belongOrgId: [ { required: true, message: '请填写所属二级集团', trigger: 'change',}],
                    companyId: [ { required: true, message: '请填写单位名称', trigger: 'change',}],
                    occurrenceTime: [ { required: true, message: '请填写发生时间', trigger: 'change',type:'date'}],
                    address: [ { required: true, message: '请填写地点或部位', trigger: 'change',}],
                    description: [ { required: true, message: '请填写事件经过描述', trigger: 'change',}],
                    emergencyDisposal: [ { required: true, message: '请填写应急处置情况', trigger: 'change',}],
                    causeAnalysis: [ { required: true, message: '请填写原因分析', trigger: 'change',}],
                    rectificationOfHiddenDangers: [ { required: true, message: '请填写隐患整改情况', trigger: 'change',}],
                    summarizeExperience: [ { required: true, message: '请填写事件反思或经验总结', trigger: 'change',}],
                    createUserName: [{required: true, message: '请填写填报人', trigger: 'change',}],
                    createDate: [{required: true, message: '请填写填报时间', trigger: 'change', type: 'date'}],
                    // idFiles: [{
                    //     validator: (rule, value, callback) => {
                    //         if (this.dataToView.idFiles.length < 1) {
                    //             callback('附件必须上传')
                    //         } else {
                    //             callback()
                    //         }
                    //     },
                    //     required: true,
                    //     trigger: 'change'
                    // }]
                },
                tableHeight: 10,
                dictMap: {},
                punishment: false,
                penaltyAmount: true,
                // api
                queryUrl: Api.queryNearMissRecord,
                exportUrl: Api.exportNearMissRecord,
                deleteUrl: Api.deleteNearMissRecord,
                getUrl: Api.getNearMissRecord,
                updateUrl: Api.updateNearMissRecord,
                saveUrl: Api.saveNearMissRecord,
                show:true,
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),

            }
        },
        async mounted() {
            this.setTableHeight();
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                this.queryAjax();
            },

            submit(name) {
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName: this.currentUser.userName,
                    id: this.get_uuid(),
                    idFiles: [],
                }
            },
            async afterDataToViewInit() {
                // await this.getFiles1('id', 'nearMissRecord');
            },
        },
        watch: {},
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

</style>